<template>
  <div style=" position: relative;width: 700px" class="draw-setting-coupon">
    <Table  width="100%" :columns="columns" :data="value">
      <template slot-scope="{ row }" slot="couponType">
        {{ getEnumsName(row.refType, couponTypeList) }}
      </template>
      <template slot-scope="{ row }" slot="productPeriod">
        <Select v-model="row.productPeriod">
          <Option v-for="(item, index) in 1" :value="item" :key="index">每{{ item }}个月一次</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="productQty">
        <Input v-model="row.productQty"
          :maxlength="2"
          placeholder="请输入"
          @on-keyup="filterNumber(row)"
          @on-blur="blurNumber(row, index)"></Input>
      </template>
      <template slot-scope="{ row }" slot="accumAmount">
        <Input v-model="row.accumAmount"
          placeholder="自动计算" disabled></Input>
      </template>
    </Table>
    <Icon type="ios-add-circle" size="24" color="#2D8CF0" class="coupon-addicon" @click= "showDrawer" />
    <div>
    <Icon type="md-trash" size="24"  color="#808695" class="coupon-removeicon" @click="removeItem(index)" v-for="(item, index) in value.length" :key="index" :style="{'top': (2 + 48 * (index + 1)) + 'px'}" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import enumsMixin from '@/view/market/enums.js'
export default {
  name: 'SelectSettingCoupon',
  mixins: [enumsMixin],
  data () {
    return {
      couponName: '',
      searchObj: {
        couponName: '',
        couponType: -1
      },
      columns: [
        {
          title: '优惠券名称',
          width: 160,
          key: 'refName'
        },
        {
          title: '类型',
          slot: 'couponType'
        },
        {
          title: '发券周期',
          width: 160,
          slot: 'productPeriod'
        },
        {
          title: '单次数量',
          slot: 'productQty'
        },
        {
          title: '共计张数',
          slot: 'accumAmount'
        }
      ],
      valid: ''
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    validPeriod: {
      type: String
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  watch: {
    validPeriod (val) {
      this.valid = val
    }
  },
  mounted () {
  },
  methods: {
    showDrawer () {
      this.$emit('addcoupon', true)
    },
    removeItem (index) {
      let newVal = this.value.filter((item, i) => i !== index)
      this.$emit('input', newVal)
    },
    filterNumber (row) {
      row.productQty = row.productQty.replace(/[\D\s]/g, '')
      if (row.productQty[0] === '0') {
        row.productQty = row.productQty.substr(1, 1)
      }
    },
    blurNumber (row, index) {
      this.filterNumber(row)
      if (!row.productQty) {
        row.productQty = '1'
      }
      if (this.valid) {
        row.accumAmount = (+this.valid / +row.productPeriod) * (+row.productQty) + ''
      }
      this.$emit('couponchange', row, index)
    }
  }
}
</script>
<style>
.draw-setting-coupon .ivu-table-cell {line-height: 1.5;}
</style>
<style lang='less' scoped>
  .coupon-addicon{ position:absolute;  right:-70px; top:50px; cursor: pointer; }
  .coupon-removeicon{ position:absolute; right:-40px; cursor: pointer;}
</style>
